<template>
  <div class="menu-box">
    <div
        class="icon-item"
        v-show="false"
    >
      <ArrowLeftBold />
    </div>
    <el-tooltip
        class="tooltip"
        effect="light"
        content="查询统计"
        placement="bottom-end"
    >
      <div
          class="icon-item"
          @click="toQuery"
      >
        <Search />
      </div>
    </el-tooltip>
  </div>
</template>

<script setup>
import {ElTooltip} from "element-plus";
import {Search, Document, ArrowLeftBold, }from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
const router = useRouter()
let isBackShow = ref(true)
onMounted(()=>{
  console.log(router.currentRoute)
  if (router.currentRoute.value.fullPath==='/home'){
    isBackShow.value = false
  }
})

const toQuery = ()=>{
  router.push('/query')
}

const toDoc = ()=>{
  router.push('/document')
}
</script>

<style scoped lang="less">
.menu-box{
  position: absolute;
  width: 2vw;
  height: 86vh;
  top: 9%;
  left: 1%;
  color: #ABABAB;
  .tooltip{
    cursor: pointer;
    background: linear-gradient(45deg, #b2e68d, #bce689);
    right: 0;
  }
  .icon-item{
    cursor: pointer !important;
    border-right: 2px solid #8B8989;
    padding-right: 30%;
    width: 3vh;
    margin-top: 6vh;
    vertical-align: bottom;
    &:first-child{
      margin-top: 2vh;
      border-right: none;
      color: #fff;
      &:hover{
        color: #00FFFF;
        border-right: none;
      }
    }
    &:hover{
      border-right: 5px solid #00E5EE;
      color: #00E5EE;
      font-weight: bold;
    }
  }
}
</style>